<template>
<div class="container-fluid">
    <div class="box box-primary">
        <div class="box-header">
            <h4 class="text-primary text-center">录像计划</h4>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-md-12">
                    <form role="form" class="form-horizontal" autocomplete="off">
                        <div class="form-group" v-if="hasAllChannel(serverInfo, userInfo)">
                            <label class="col-md-2 control-label m-label">配置方式</label>
                            <div class="col-md-9">
                                <el-radio-group v-model="editModel" size="small">
                                    <el-radio-button label="single">单个配置</el-radio-button>
                                    <el-radio-button label="range">批量配置</el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="form-group" v-if="hasAllChannel(serverInfo, userInfo)">
                            <label class="col-md-2 control-label m-label">当前通道</label>
                            <div class="col-md-9">
                                <div style="margin-top:5px;">
                                    <label v-show="editModel == 'single'"><span style="color:#0c6bba;font-size:18px;">通道 {{channel}}</span> </label>
                                    <label v-show="editModel == 'range'"> <span style="color:#0c6bba;font-size:18px;">通道 {{rangechannel[0]}}-{{rangechannel[1]}}</span></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group" v-else>
                            <label class="col-md-2 control-label m-label">选择通道</label>
                            <div class="col-md-9">
                                <el-select v-model="channel" size="small" filterable>
                                    <el-option v-for="uc in userChannels" :key="uc.channel" :label="uc.name" :value="uc.channel"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-group" title="可切换通道号查看对应通道号录像计划" v-if="editModel == 'single' && hasAllChannel(serverInfo, userInfo)">
                            <label class="col-md-2 control-label m-label">编辑通道</label>
                            <div class="col-md-9">
                                <el-input-number size="small" v-model="channel" :min="1" :max="serverInfo.ChannelCount" label="通道号" controls-position="right"></el-input-number>
                            </div>
                        </div>
                        <div class="form-group" title="可切换通道号查看对应通道号录像计划" v-if="editModel == 'single' && hasAllChannel(serverInfo, userInfo)">
                            <label class="col-md-2 control-label m-label">滑选通道</label>
                            <div class="col-md-9">
                                <el-slider v-model="channel" :format-tooltip="formatTooltip" :min="1" :max="serverInfo.ChannelCount"></el-slider>
                            </div>
                        </div>
                        <div class="form-group" title="通道号范围" v-if="editModel == 'range'">
                            <label class="col-md-2 control-label m-label">编辑范围</label>
                            <div class="col-md-9">
                                从通道 <el-input-number size="small" v-model="rangechannel[0]" :min="1" :max="serverInfo.ChannelCount" label="通道" controls-position="right"></el-input-number>
                                至通道 <el-input-number size="small" v-model="rangechannel[1]" :min="1" :max="serverInfo.ChannelCount" label="通道" controls-position="right"></el-input-number>
                            </div>
                        </div>
                        <div class="form-group" title="滑选通道范围" v-if="editModel == 'range'">
                            <label class="col-md-2 control-label m-label">滑选范围</label>
                            <div class="col-md-9">
                                <el-slider v-model="rangechannel" :format-tooltip="formatTooltip" range :min="1" :max="serverInfo.ChannelCount"></el-slider>
                            </div>
                        </div>
                        <div class="form-group" title="-1(永久保存), 0(关闭录像), x>0(录像保存x天)">
                            <label class="col-md-2 control-label m-label">
                                录像保留(天)
                            </label>
                            <div class="col-md-9">
                                <el-input-number size="small" v-model.number="record" :min="-1" :max="1000"></el-input-number>
                            </div>
                        </div>
                        <div class="form-group" v-if="channel">
                            <label class="col-md-2 control-label m-label">录像时段</label>
                            <div class="col-md-9">
                                <RecordPlan v-show="recordPlan !=''" ref="recordPlan"></RecordPlan>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label m-label"></label>
                            <div class="col-md-9">
                                <button type="button" class="btn btn-primary" @click="onSubmit" :disabled="!channel">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import RecordPlan from 'components/RecordPlan.vue';
import { mapState } from "vuex";
export default {
    data() {
        return {
            record: 0,
            recordPlan: "",
            channel: 0,
            editModel: "single",
            rangechannel: [1, 1],
            userChannels: [],
        }
    },
    watch: {
        channel: function () {
            this.initChannelPlan();
        },
        editModel: function () {
            if (this.editModel == "range") {
                this.rangechannel = [1, this.serverInfo.ChannelCount];
                this.$refs.recordPlan.init("", undefined);
            } else {
                this.$refs.recordPlan.init(this.recordPlan, this.channel);
            }
        }
    },
    components: {
        RecordPlan
    },
    computed: {
        ...mapState(["userInfo", "serverInfo"])
    },
    mounted() {
        if(!this.hasAllChannel(this.serverInfo, this.userInfo)) {
            $.get("/api/v1/getchannelsconfig").then(data => {
                var rows = (data.LiveQing || data.NVR).Body.Channels || [];
                if(!rows.length) {
                    this.userChannels.push({
                        channel: 0,
                        name: "没有可配置通道",
                    })
                    return
                }
                rows.forEach((row, idx) => {
                    this.userChannels.push({
                        channel: row.Channel,
                        name: `${row.Channel} - ${row.Name}`,
                    })
                    if(idx == 0) this.channel = row.Channel;
                });
            })
        }
    },
    methods: {
        formatTooltip(val) {
            return "通道 " + val + " 录像计划";
        },
        onSubmit() {
            this.recordPlan = this.$refs.recordPlan.getChecks();
            if (this.channel == 0 && this.hasAllChannel(this.serverInfo, this.userInfo)) {
                this.channel = 1;
            }
            var p = {
                channel: this.channel,
                plan: this.recordPlan,
                record: this.record,
            }
            if (this.editModel == 'range') {
                p = {
                    channel: this.rangechannel[0],
                    endchannel: this.rangechannel[1],
                    plan: this.recordPlan,
                    record: this.record,
                }
            }
            $.get("/api/v1/record/setplan", p).then(() => {
                this.$message({
                    type: "success",
                    message: "保存通道 " + (this.editModel == 'range' ? this.rangechannel[0] + '至' + this.rangechannel[1] : this.channel) + " 录像计划成功"
                });
            }).always(() => {});
        },
        initChannelPlan() {
            $.get("/api/v1/record/getplan", {
                channel: this.channel
            }).then((data) => {
                this.recordPlan = data.plan;
                this.record = data.record;
                this.$refs.recordPlan.init(this.recordPlan, this.channel);
            }).always(() => {});
        }
    },
}
</script>

<style lang="less" scoped>
.channels {
    max-height: 480px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.channel {
    height: 30px;
    width: 25%;
    line-height: 30px;
    float: left;
    font-size: 12px;
    border-color: #eee;
    text-align: center;
    border-style: none none none solid;
    border-left-width: 1px;
    cursor: pointer;

}

.channel-no:hover {
    background-color: lighten(#ddd, 10%);
}

.channel:hover {
    background-color: lighten(#00c0ef, 10%);
}
</style>
